<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="common/head::head">
</head>
<body>
<div class="layui-container">
    <form action="./save.json" class="layui-form" id="form" lay-filter="form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">节点ID</label>
                <div class="layui-input-block">
                    <input type="text" id="id" name="id" th:value="${item?.id}" placeholder="创建后不能修改"
                           class="layui-input"
                           required
                           th:readonly="${item}"
                           lay-verify="required">
                    <input type="hidden" name="type" th:value="${type}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">节点名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name" th:value="${item?.name}" placeholder="请填写节点名称"
                           class="layui-input"
                           required
                           lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分组名称</label>
                <div class="layui-input-block">
                    <select name="group" lay-filter="group">
                        <option th:each="i : ${groups}" th:value="${i}" th:selected="${item?.group==$i}"
                                th:text="${i}"></option>
                        <option value="">选择手动添加</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">监控周期</label>
                <div class="layui-input-block">
                    <select name="cycle" lay-filter="cycle">
                        <option th:each="i : ${cycleArray}" th:value="${i.code}" th:selected="${item?.cycle==i.code}"
                                th:text="${i.desc}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">节点协议</label>
                <div class="layui-input-block">
                    <select name="protocol" lay-verify="required" lay-filter="aihao">
                        <option value="http" th:selected="${item?.protocol=='http'}">http</option>
                        <option value="https" th:selected="${item?.protocol=='https'}">https</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">节点状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" value="true"
                           th:checked="${item==null || item?.openStatus}"
                           name="openStatus"
                           lay-skin="switch"
                           lay-text="启用|停用">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">节点地址</label>
            <div class="layui-input-block">
                <input type="text" id="url" name="url" th:value="${item?.url}"
                       placeholder="请填写节点地址,ip:port，如：(127.0.0.1:2123)或者域名" class="layui-input"
                       required
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">节点账号</label>
                <div class="layui-input-block">
                    <input type="text" id="loginName" name="loginName" th:value="${item?.loginName}"
                           placeholder="请填写节点登录账号"
                           class="layui-input" required
                           lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">节点密码</label>
                <div class="layui-input-block">
                    <input type="password" id="loginPwd" name="loginPwd" th:value="${item?.loginPwd}"
                           placeholder="请填写节点登录密码,节点默认请查看节点安装文档"
                           class="layui-input"
                           required
                           lay-verify="required">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">超时时间</label>
            <div class="layui-input-block">
                <input type="text" id="timeOut" name="timeOut" th:value="${item?.timeOut}"
                       placeholder="节点请求超时时间（毫秒）"
                       class="layui-input"
                       required
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item" th:unless="${#lists.isEmpty(sshList)}">
            <label class="layui-form-label">绑定ssh</label>
            <div class="layui-input-block">
                <select name="sshId" lay-search="">
                    <option value="">请选择绑定SSH</option>
                    <option th:disabled="${s.get('disabled')}"
                            th:selected="${s.id==item?.sshId}"
                            th:value="${s.id}" th:each="s : ${sshList}"
                            th:text="${s.name}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="padding-left: 20%">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitNode" id="project_submit">提交
            </button>

            <a th:if="${item}" class="layui-btn layui-btn-warm" th:data-id="${item.id}" id="delete_node">删除</a>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">


    function loadSuccess() {
        form.on('submit(submitNode)', function (data) {
            loadingAjax({
                url: data.form.action,
                data: data.field,
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 === data.code) {
                        autoClose();
                    }
                }
            });
            return false;
        });

        $("#delete_node").click(function () {
            var id = $(this).attr("data-id");
            var type = $(this).attr("type");
            var msg = '确定删除节点 ' + id + '？（不会影响节点下的数据）';
            layer.confirm(msg, {
                title: '系统提示'
            }, function (index) {
                loadingAjax({
                    url: './del.json',
                    data: {
                        id: id
                    },
                    success: function (data) {
                        layer.msg(data.msg);
                        if (200 === data.code) {
                            autoClose();
                        }
                    }
                });
            });
        });

        var selectGroup = $("select[name='group']");
        form.on('select(group)', function (data) {
            if (data.value === "") {
                layer.prompt({
                    title: '输入分组名，并确认',
                    formType: 0
                }, function (text, index) {
                    layer.close(index);
                    var ext = $("select[name='group'] option[value='" + text + "']");
                    if (ext.length <= 0) {
                        selectGroup.find("option").first().before("<option value='" + text + "'>" + text + "</option>");
                    }
                    form.val("form", {
                        "group": text
                    });
                    form.render('select');
                });
            }
        });
    }
</script>
</html>
